<!-- <template>
    <view class="content">
        <image class="header-bg" src="@/static/img/home_bg.png"></image>
        <view class="content-box">
            <view class="title">
                活动中心
            </view>
            <view class="search-box">
                <u-search v-model="keywords" @clear="clear" @custom="search" @search="search" :clearabled="true" placeholder="请输入活动关键字"></u-search>
            </view>
            <view class="rec-title">
                今日推荐
            </view>
            <view class="sub-rec-title">
                快来参加活动吧！
            </view>
            <view class="ads-box">
                <u-swiper height="200" @click="adClick" :list="ads" keyName="image" indicator indicatorMode="dot"></u-swiper>
                <u-notice-bar v-if="notice.title" :text="notice.title"></u-notice-bar>
            </view>
            <view class="active-box">
                <u-tabs :activeStyle="{fontSize:'16px',fontWeight:'600'}" lineWidth="60" :list="tabs" @click="cateChange"></u-tabs>
                <view class="active-list">
                    <view class="active-item" v-for="(item,index) in active" :key="index">
                        
                        <u-row customStyle="margin-bottom: 10px">
                           <u-col span="5">
                                <image class="ac-img" @click="toPage('/pages/active/detail',{id:item.id})" :src="item.title_image"></image>
                            </u-col>
                            <u-col span="7">
                                <view class="ac-title" @click="toPage('/pages/active/detail',{id:item.id})">{{item.title}}</view>
                                <view class="ac-time">活动时间:{{item.activity_time}}</view>
                                <view class="btn-box">
                                    <view class="progress">
                                        进度:{{item.count}}/{{item.quota}}
                                        <u-line-progress :showText="false" height="6" :percentage="parseInt(item.count/item.quota*100)" :activeColor="parseInt(item.count/item.quota*100)>80?'#f0ad4e':'#4cd964'"></u-line-progress>
                                    </view>
                                    <view class="btn">
                                        <u-button size="mini" @click="toPage('/pages/active/join',{id:item.id})" type="primary" shape="circle" text="立即报名"></u-button>
                                    </view>
                                </view>
                            </u-col>
                        </u-row>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template> -->

<!-- 下面是老师新代码 -->

<template>
    <view class="content">
        <image class="header-bg" src="@/static/img/home_bg.png"></image>
        <view class="content-box">
            <view class="title">活动中心</view>
            <view class="search-box">
                <u-search placeholder="活动关键字" v-model="keywords"  @search="search" @custom="search"></u-search>
            </view>
            <view class="rec-title">今日推荐 </view>
            <view class="sub-rec-title">快来参加活动吧！ </view>
            <view class="ads-box">
                <u-swiper :list="ads" indicator indicatorMode="dot"  keyName="image" height="200" @click="adsClick" ></u-swiper>
                <u-notice-bar v-if="notice.title" :text="notice.title"></u-notice-bar>
            </view>
            <view class="active-box">
                <u-tabs lineWidth="60" :activeStyle="{'fontSize':'16px','fontWeight':'600'}" :list="tabs" @click="tabsClick"></u-tabs>
                <view class="active-list">
                    <view class="active-item" v-for="(item,index) in activeList" :key="index">
                        <u-row customStyle="margin-bottom: 10px">
                            <u-col span="5">
                                <image @click="toPage('/pages/active/detail',{id:item.id})" class="ac-img" :src="item.title_image"></image>
                            </u-col>
                            <u-col span="7">
                                <view class="ac-title" @click="toPage('/pages/active/detail',{id:item.id})">{{item.title}}</view>
                                <view class="ac-time">{{item.activity_time}}</view>
                                <view class="btn-box">
                                    <view class="progress">
                                        进度:{{item.count}}/{{item.quota}}
                                        <u-line-progress height="6" :showText="false" :percentage="item.count/item.quota*100" :activeColor="(item.count/item.quota*100)>=80?'#f0ad4e':'#4cd964'"></u-line-progress>
                                    </view>
                                    <view class="btn">
                                        <u-button @click="toPage('/pages/active/join',{id:item.id})" shape="circle" type="primary" text="立即报名" size="small"></u-button>
                                    </view>
                                </view>
                            </u-col>
                        </u-row>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	
	export default {
	        data() {
	            return {
	                keywords:'',
	                ads:[],
	                notice:{},
	                tabs:[
	                    {name:'热门推荐',id:''},
	                    {name:'线上活动',id:15},
	                    {name:'线下活动',id:14},
	                ],
	                category:'',
	                activeList:[],
	            }
	        },
	        onLoad() {
	            uni.$u.http.get('/index/index').then((res) => {
	                // console.log(res)
	                if(res.code==1){
	                    this.ads = res.data.banner
	                    this.notice = res.data.notice[0]
	                }
	            })
	            this.getData()
	        },
	        methods: {
	            search(){
	                if(this.keywords==''){
	                    uni.showToast({
	                        title:'请输入关键字',
	                        icon:'none'
	                    })
	                    return false
	                }
	                this.$u.vuex('vuex_keywords',this.keywords)
	                uni.switchTab({
	                    url:'/pages/active/index'
	                })
	            },
	            
	            adsClick(e){
	                // console.log(e)
	                let url = this.ads[e].link
	                this.toPage(url,{})
	            },
	            tabsClick(e){
	                this.category = e.id
	                this.getData()
	            },
	            getData(){
	                uni.$u.http.get('/index/activity',{params: {category: this.category}}).then((res) => {
	                    if(res.code==1){
	                        this.activeList = res.data
	                        // console.log(this.activeList)
	                    }
	                })
	            }
	        }
	    }
	
	
	
    //    export default {
    //        data() {
    //            return {
    //                keywords:'',
    //                ads:[],
    //                notice:{},
    //                category:'',
    //                tabs:[
    //                    {name:"热门推荐",id:''},
    //                    {name:"线下活动",id:14},
    //                    {name:"线上活动",id:15},
    //                ],
    //                active:[],
    //            }
    //        },
    //        onLoad() {
    //            // 也可以直接通过uni.$u.post发出请求，注意此处需要写上接口地址
    //            uni.$u.http.get('/index/index').then((res) => {
    //                console.log(res)
    //                this.ads = res.data.banner
    //                this.notice = res.data.notice[0]
    //                console.log(this.ads)
    //            })
    //          // this.getData()
			 // this.cateChange(0)
    //        },
    //        methods: {
    //            //清除搜索条件
    //            clear(){
    //                this.keywords = ''
    //            },
    //            // 搜索事件
    //            search(){
    //                if(this.keywords==''){
    //                    uni.showToast({
    //                        title:'请输入关键字',
    //                        icon:"none",
    //                    })
    //                    return false
    //                }
    //                this.$u.vuex('vuex_keywords',this.keywords)
    //                uni.switchTab({
    //                    url:'/pages/active/index',
    //                })
    //            },
    //            adClick(e){
    //                let link = this.ads[e].link
    //                this.toPage(link,{})
    //            },
    //            cateChange(e){
    //                this.category = e.id
    //                this.getData()
    //            },
    //            getData(){
    //                uni.$u.http.get('/index/activity', {params: {category: this.category}}).then((res) => {
    //                    this.active = res.data
    //                })
    //            }
    //        }
    //    }

</script>

<style lang="scss">
	.content {
	        .header-bg{
	            position: absolute;
	            left: 0;
	            top: 0;
	            z-index: 1;
	            width: 100vw;
	            height: calc(100vw / 752 * 342);
	        }
	        .content-box{
	            position: relative;
	            z-index: 2;
	            .title{
	                font-size: 16px;
	                font-weight: 500;
	                color: rgba(255, 255, 255, 1);
	                padding: 55px 0 0 18px;
	            }
	            .search-box{
	                padding: 10px 20px;
	                /deep/.u-search__action{
	                    color:#666;
	                    background-color: #FFFFFF;
	                    border-radius: 16px;
	                    padding: 6px 8px;
	                }
	            }
	            .rec-title{
	                padding-top: 20px;
	                padding-left: 20px;
	                font-size: 16px;
	                font-weight: 500;
	                color: rgba(51, 51, 51, 1);
	                &::after{
	                    display: block;
	                    content: '';
	                    width: 64px;
	                    height: 4px;
	                    border-radius: 20px;
	                    background: rgba(16, 103, 219, 1);
	                }
	
	            }
	            .sub-rec-title{
	                padding-top: 4px;
	                padding-left: 20px;
	                font-size: 10px;
	                font-weight: 400;
	                color: rgba(153, 153, 153, 1);
	
	            }
	            .ads-box{
	                padding:10px 20px;
	            }
	            .active-box{
	                padding:10px 20px;
	                .active-list{
	                    margin-top: 10px;
	                }
	                .ac-img{
	                    width: 121px;
	                    height: 90px;
	                    border-radius: 8px;
	                }
	                .ac-title{
	                    overflow: hidden; /* 隐藏超出部分 */
	                    text-overflow: ellipsis; /* 当文本超过最大高度时显示省略号 */
	                    white-space: nowrap; /* 防止文本换行 */
	                }
	                .ac-time{
	                    font-size: 12px;
	                    color: rgba(153, 153, 153, 1);
	                    line-height: 2;
	                }
	                .btn-box{
	                    display: flex;
	                    justify-content: space-between;
	                    .progress{
	                        width: 110px;
	                        margin-right: 6px;
	                        font-size: 10px;
	                        font-weight: 400;
	                        color: rgba(102, 102, 102, 1);
	
	                    }
	                }
	            }
	        }
	    }

</style>